<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            list-style: none;
        }
        .wrap{
            border: 1px solid lightskyblue;
            margin: 30px;
            position: relative;
            width: 300px;
            border-radius:8px;
        }
        .head{
            padding: 20px;
        }
        .pic2{
            position: absolute;
            left: 75px;
            top: 70px;
        }
        .pic3{
            padding-left: 15px;
            vertical-align: middle;
           
        }
        .text{
            float: right;
            padding-right: 30px;
        }
       p{
           color: rgba(0, 0, 0, .6);
       }
       .food{
           margin-top: 20px;
           margin-bottom: 20px;
       }

    </style>
</head>
<body>
    <div class="wrap">
        <div class="head" style="font-size: 15px;">
            <span style="color: red;padding-right: 10px;">SHOP</span>
            <span style="font-weight: bold;">今日推荐</span>
            <img class="pic" src="img/more.gif" alt="" style="float:right">
        </div>
        <img class="pic2" src="img/shen.png" alt="">
        <div class="body">
            <ul class="list">
                <li class="food">
                  <img class="pic3" src="img/img9.gif" alt="">
                  <div class="text">
                    <p class="p1"><a href="#" style="color: #BC1E1E;font-weight: bold;">汉来国际美食百货</a></p> 
                    <p>口味：创意中餐</p>
                    <p>区域：朝阳/CBD</p>
                  </div>
                </li>
                <li class="food">
                    <img class="pic3" src="img/img8.gif" alt="">
                    <div class="text">
                      <p class="p1"><a href="#" style="color: #BC1E1E;font-weight: bold;">汉来国际美食百货</a></p> 
                      <p>口味：创意中餐</p>
                      <p>区域：朝阳/CBD</p>
                    </div>
                </li>
                <li class="food">
                    <img class="pic3" src="img/img7.gif" alt="">
                    <div class="text">
                      <p class="p1"><a href="#" style="color: #BC1E1E;font-weight: bold;">汉来国际美食百货</a></p> 
                      <p>口味：创意中餐</p>
                      <p>区域：朝阳/CBD</p>
                    </div>
                </li>
                <li class="food">
                    <img class="pic3" src="img/img8.gif" alt="">
                    <div class="text">
                      <p class="p1"><a href="#" style="color: #BC1E1E;font-weight: bold;">汉来国际美食百货</a></p> 
                      <p>口味：创意中餐</p>
                      <p>区域：朝阳/CBD</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>